<template>
	<view class="page">
		<view class="address-input">
			<view class="list-input">
				<view class="title">
					<text>收货人</text>
				</view>
				<view class="content">
					<input type="text" placeholder="请填写收货人姓名" v-model="addressData.consignee">
				</view>
			</view>
			<view class="list-input">
				<view class="title">
					<text>手机号</text>
				</view>
				<view class="content">
					<input type="number" placeholder="请填写收货人手机号" v-model="addressData.phone">
				</view>
			</view>
			<view class="list-input" @tap="selCity">
				<view class="title">
					<text>所在地区</text>
				</view>
				<view class="content">
					<input type="tel" placeholder="点击选择所在地区" v-model="addressData.area_text">
				</view>
			</view>
			<view class="list-textarea">
				<view class="title">
					<text>详细地址</text>
				</view>
				<view class="content">
					<textarea type="tel" placeholder="街道/楼牌号等" v-model="addressData.address" />
				</view>
			</view>
		</view>
		<view class="tag-default">
			<view class="tag-list">
				<view class="title">
					<text>标签</text>
				</view>
				<view class="content">
					<view class="list" @tap="tagClick(item)" :class="{'action':item==addressData.tag}" v-for="item in taglist" :key="item">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="default-address">
				<view class="title">
					<text>默认地址</text>
				</view>
				<view class="switch-default" @tap="onSwitch">
					<switch class="red sm" color="#0077EE !important" :checked="addressData.is_default"></switch>
				</view>
			</view>
		</view>
		<view  v-if="addressType != 0" class="footer-btn" style="padding:0 20rpx;">
			<view class="btn" style="margin-right:10rpx;" @tap="deleteAddress">
				<text>删除</text>
			</view>
			<view class="btn" @tap="editAddress">
				<text>保存</text>
			</view>
		</view>
		<view v-else class="footer-btn">
			<view class="btn" @tap="editAddress">
				<text>保存</text>
			</view>
		</view>
		<shopro-picker ref="shoproCityPicker" :pickerValueDefault="addressData.area_id" @onCancel="onCancel" @onConfirm="onConfirm"></shopro-picker>
		
	</view>
</template>

<script>
	import shoproPicker from '@/components/shopro-picker/shopro-picker.vue';//属性规格
	export default {	
		components: {
			shoproPicker,
		},
		data() {
			return {
				addressData: {
					id: 0,
					consignee: '',//收货人
					phone: '',//手机号码
					area_text: '',//地址
					area_id: [0, 0, 0],//城市id
					address: '',//街道/楼牌
					tag:'家',//标签
					is_default: false,//是否默认地址
					// latitude: '',
					// longitude: ''
				},
				chooseAddress: '', //定位地址
				pickerData: {},
				from: '',
				taglist:['家','公司','学校'],
				addressType: 0,
			};
		},
		onLoad(params) {
			console.log(params)
			this.addressType = params.id;
			this.addressData.id = params.id;
			console.log(this.addressType)
			if (this.addressData.id != 0) {
				this.getAddressInfo();
			}
			uni.setNavigationBarTitle({
				title: this.addressType != 0 ? '编辑收货地址':'新建收货地址'
			})
		},
		methods: {
			//打开picker
			selCity() {
				this.$refs.shoproCityPicker.show();
			},
			onConfirm(e) {
				this.addressData.area_id = e.value;
				this.addressData.area_text = e.label;
			},
			onCancel(e) {
				this.addressData.area_id = e.value;
				this.addressData.area_text = e.label;
			},
			tagClick(item){
				this.addressData.tag = item
			},
			//是否默认收货地址 true/false
			onSwitch() {
				this.addressData.is_default = !this.addressData.is_default;
			},
			// 查询id地址信息
			getAddressInfo() {
				this.$api.order.getAddress({
					data:this.addressData.id
				}).then((res) => {
					console.log(res)
					let address = res.data[0]
					address.is_default = address.is_default == '1' ? true : false;
					address.area_id = JSON.parse(address.area_id)
					this.addressData = address
					console.log(address)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// 编辑添加地址
			editAddress() {
				//构造数据验证表单是否存在空值
				let data = {
				  consignee: {
					msg: '收货人不能为空'
				  },
				  phone: {
					msg: '手机号不能为空'
				  },
				  area_id: {
					msg: '请选择地区'
				  },
				  address: {
					msg: '街道/楼牌号不能为空'
				  }
				};
				for (let key in data) {
				  if (!this.addressData[key]) {
					uni.showToast({
					  title: data[key].msg,
					  icon: 'none',
					  duration: 2000
					})
					return;
				  }
				  if (key == 'phone' && !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.addressData[key])) {
				  	uni.showToast({
				  	  title: '请输入正确的手机号码',
				  	  icon: 'none',
				  	  duration: 2000
				  	})
				  	return;
				  }
				}
				this.$api.order.addAddress({
					data:JSON.stringify(this.addressData)
				}).then((res) => {
					console.log(res)
					// 返回上一页
					uni.showToast({
					  title: res.data.message,
					  icon: 'none',
					  duration: 2000
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},500)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// 删除收货地址
			deleteAddress() {
				this.$api.order.deleteAddress({
					data:this.addressData.id
				}).then((res) => {
					// console.log(res)
					uni.showToast({
					  title: res.data.message,
					  icon: 'none',
					  duration: 2000
					})
				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'AddressEdit.scss';
</style>
